<template>
    <div class="p-flow-list">
        <div class="u-item">
            <div id="listLeft">
                <slot name="left" :left="leftList"></slot>
            </div>
        </div>
        <div class="u-item">
            <div id="listRight">
                <slot name="right" :right="rightList"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "flowItem",
    props: {
        routesList: Array,
    },
    data() {
        return {
            list: [],
            leftList: [],
            rightList: [],
        };
    },
    watch: {
        routesList() {
            if (this.routesList.length > 0) {
                let list = [...this.routesList];
                list.splice(0, this.leftList.length + this.rightList.length);
                this.list = [...list];
            } else {
                this.list = [...this.routesList];
                this.leftList = [];
                this.rightList = [];
            }
            if (this.list.length > 0) {
                this.setList();
            }
        },
    },
    activated() {},
    mounted() {
        this.list = [...this.routesList];
        this.leftList = [];
        this.rightList = [];
        if (this.list.length > 0) {
            this.setList();
        }
    },
    methods: {
        remove(index, type) {
            if (type === "left") {
                this.leftList.splice(index, 1);
            } else {
                this.rightList.splice(index, 1);
            }
        },
        async setList() {
            const item = this.list[0];
            try {
                const query = wx.createSelectorQuery().in(this);
                const rectLeft = await new Promise((resolve, reject) => {
                    query
                        .select("#listLeft")
                        .boundingClientRect((rect) => {
                            resolve(rect);
                        })
                        .exec();
                });
                const rectRight = await new Promise((resolve, reject) => {
                    query
                        .select("#listRight")
                        .boundingClientRect((rect) => {
                            resolve(rect);
                        })
                        .exec();
                });

                let left = rectLeft ? rectLeft.height : 0;
                let right = rectRight ? rectRight.height : 0;
                if (right >= left) {
                    this.leftList.push(item);
                } else {
                    this.rightList.push(item);
                }
                this.list.splice(0, 1);
                if (this.list.length > 0) {
                    setTimeout(() => {
                        this.setList();
                    }, 50);
                }
            } catch (error) {
                console.error("获取元素高度失败", error);
            }
        },
    },
    computed: {},
};
</script>

<style scoped lang="scss">
.p-flow-list {
    display: flex;
    justify-content: space-between;

    .u-item {
        flex: 1;
    }
}
</style>
